<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>用户管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        用户名：
        <a-input placeholder="请输入" v-model="queryForm.userName" />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>用户列表</div>
        <a-button type="primary" @click="addFn" v-hasPermi="['user:add']"
          >添加</a-button
        >
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
        >
          <span slot="avatar" slot-scope="avatar">
            <img class="img" :src="avatar" alt=""
          /></span>
          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
          <span slot="action" slot-scope="text, record">
            <!-- <a @click="roleFn(text,record)">关联角色</a>
            <a-divider type="vertical" /> -->
            <a @click="editFn(text, record)" v-hasPermi="['user:edit']">修改</a>
            <a-divider type="vertical" />
            <a
              @click="delFn(text, record)"
              class="red"
              v-hasPermi="['user:del']"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      title="用户配置"
      :visible="dialogVisible"
      width="60%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false,cancelReset()"
      @ok="putUser"
    >
      <a-form v-if="type == 'Create'" :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="用户昵称"
            >
              <a-input
                v-decorator="[
                  'userName',
                  { rules: [{ required: true, message: '请输入用户昵称' }] },
                ]"
                placeholder="请输入用户昵称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label=" 登录账号"
            >
              <a-input
                v-decorator="[
                  'loginName',
                  { rules: [{ required: true, message: '请输入登录账号' }] },
                ]"
                placeholder="请输入登录账号"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="密码"
            >
              <a-input
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码' }] },
                ]"
                placeholder="请输入密码"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="手机号码"
            >
              <a-input
                v-decorator="[
                  'phone',
                  { rules: [{ required: true, message: '请输入手机号码' }] },
                ]"
                placeholder="请输入手机号码"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="部门"
            >
              <a-tree-select
                v-decorator="[
                  'deptId',
                  { rules: [{ required: true, message: '请选择部门' }] },
                ]"
                show-search
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择部门"
                allow-clear
                tree-default-expand-all
                :treeData="deptList"
                @change="changeDept"
                :replaceFields="{
                  title: 'deptName',
                  children: 'childList',
                  value: 'id',
                }"
              >
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="岗位"
            >
              <a-select
                style="width: 150px"
                allow-clear
                v-decorator="[
                  'postId',
                  { rules: [{ required: true, message: '请选择岗位' }] },
                ]"
                placeholder="请选择岗位"
              >
                <a-select-option
                  v-for="(item, index) in postList"
                  :key="index"
                  :value="item.postId"
                >
                  {{ item.postName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="备注"
            >
              <a-input v-decorator="['remark']" placeholder="请输入备注" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="性别"
            >
              <a-radio-group
                v-decorator="[
                  'sex',
                  { rules: [{ required: true, message: '请选择性别' }] },
                ]"
              >
                <a-radio :value="'1'"> 女 </a-radio>
                <a-radio :value="'0'"> 男 </a-radio></a-radio-group
              >
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="呼叫中心id、话务id"
            >
              <!-- <a-input
                v-decorator="['huaWuId']"
                placeholder="请输入呼叫中心id、话务id"
              />  -->
              <a-select style="width: 150px" v-model="form2.callUserName"  @change="handleChange" >
                <a-select-option
                  v-for="(item, index) in hujiaoList"
                  :key="index"
                  :value="item.name"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item
          ></a-col>
        </a-row>
      </a-form>
      <div v-if="type == 'role'">
        <div class="mb20">角色关联</div>
        <a-select style="width: 150px" v-model="roleId">
          <a-select-option
            v-for="(item, index) in roleList"
            :key="index"
            :value="item.roleId"
          >
            {{ item.roleName }}
          </a-select-option>
        </a-select>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
export default {
  data() {
    return {
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      tableData: [],
      postList: [],
      deptList: [],
      roleList: [],
      roleId: "",
      type: "Create",
      id: null,
      columns: [
        // {
        //   title: '头像',
        //   dataIndex: 'avatar',
        //   key: 'avatar',
        //   scopedSlots: { customRender: 'avatar' },
        // },
        {
          title: "姓名",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "账号",
          dataIndex: "loginName",
          key: "loginName",
        },
        {
          title: "性别",
          dataIndex: "sexName",
          key: "sexName",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      hujiaoList: [],
      huaWuId:"",
      hujiaoUser:{},
      form2:{
        callUserName:'',
        callUserPwd:'',
        huaWuId:''
      }
    };
  },
  mounted() {
    this.getList();
    this.getDeptList();
    this.getRoleList();
    this.getCallUserList();
  },
  methods: {
    getList() {
      this.loading = true;
      const url = "/government-platform-center/user";
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.loading = false;
            this.total = res.data.total;
            this.tableData = res.data.data.map((item) => {
              if (item.sex == 0) {
                item.sexName = "男";
              } else if (item.sex == 1) {
                item.sexName = "女";
              } else {
                item.sexName = "其他";
              }
              return item;
            });
          }
        });
    },
    cleanQuery() {
      this.queryForm = { current: 20, offset: 1 };
      this.getList();
    },
    cancelReset(){
      this.form2 = {
        callUserName:'',
        callUserPwd:'',
        huaWuId:''
      }
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    delFn(text, record) {
      console.log(text, record);
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/user/deleteById?id=${text.userId}`;
          that.$axios.post(url).then((res) => {
            if (res.data.code == 0) {
              that.getList();
              message.success("操作成功");
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    goData(text, record) {
      this.$router.push({
        path: `/dictData`,
        query: { dictType: text.dictType },
      });
    },
    addFn() {
      this.dialogVisible = true;
      this.id = null;
      this.form.resetFields();
      this.type = "Create";
    },
    editFn(text, record) {
      this.dialogVisible = true;
      this.type = "Create";
      const url = `/government-platform-center/user/${text.userId}`;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          this.form.setFieldsValue(res.data.data);
          this.id = res.data.data.userId;
          this.changeDept(res.data.data.deptId);
          console.log(res.data.data)
          this.form2 = {
              callUserName:  res.data.data.callUserName ? res.data.data.callUserName : '',
              callUserPwd: res.data.data.callUserPwd ?res.data.data.callUserPwd:'',
              huaWuId: res.data.data.huaWuId ? res.data.data.huaWuId : ''
            }
        }
      });
    },
    putUser() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (this.type == "Create") {
          if (!this.id) {
            const url = "/government-platform-center/user";
            this.$axios
              .post(url, {...values,...this.form2 }, {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              })
              .then((res) => {
                if (res.data.code == 0) {
                  this.getList();
                  this.dialogVisible = false;
                  message.success("操作成功,请给新用户添加权限");
                }
              });
          } else {
            const form = { ...values, userId: this.id,...this.form2 };
            const url = "/government-platform-center/user/edit";
            this.$axios
              .post(url, form, {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              })
              .then((res) => {
                if (res.data.code == 0) {
                  this.getList();
                  this.dialogVisible = false;
                  message.success("操作成功");
                }
              });
          }
        } else {
          const form = { roleId: this.roleId, userId: this.id ,...form2};
          const url = "/government-platform-center/userRole/edit";
          this.$axios
            .post(url, form, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.getList();
                this.dialogVisible = false;
                message.success("操作成功");
              }
            });
        }
      });
    },
    reSetForm() {
      // this.form = { dictName: null, dictType: null, remark: null }
    },
    handleChange(e,index){
        console.log('选中的呼叫用户',index.key)
      

      if(this.hujiaoList.length >0){
        let data = this.hujiaoList[index.key]
        console.log('选中的呼叫用户',e,data)
          this.form2.callUserName = data.name;
          this.form2.callUserPwd = data.password;
          this.form2.huaWuId = data.nbr;
      }

    },
    // 会叫中心列表
    getCallUserList() {
      const url = "/government-platform-center/user/getCallUserList";
      const params = this.queryForm;
      this.$axios
        .get(url)
        .then((res) => {
          if (res.data.code == 0) {
            this.hujiaoList = JSON.parse(res.data.data);
            console.log('呼叫中西',this.hujiaoList)
          }
        });
    },
    // 部门列表
    getDeptList() {
      const url = "/government-platform-center/dept";
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.deptList = res.data.data;
            this.getOther(this.deptList);
          }
        });
    },
    getOther(list) {
      list.forEach((item, index) => {
        item = { ...item, ...item.thisData };
        // item['']
        this.$set(list, index, item);
        if (item.childList && item.childList.length > 0) {
          this.getOther(item.childList);
        }
      });
    },
    //岗位列表
    changeDept(e) {
      if (e) {
        this.getPostList(e);
      } else {
        const form = { postId: null };
        this.form.setFieldsValue(form);
      }
    },
    getPostList(e) {
      const url = "/government-platform-center/post";
      const params = { current: 999, offset: 1, deptId: e };
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.postList = res.data.data;
          }
        });
    },
    //角色列表
    getRoleList() {
      const url = "/government-platform-center/role";
      const params = { current: 999, offset: 1 };
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.roleList = res.data.data;
          }
        });
    },
    roleFn(text, record) {
      this.type = "role";
      this.dialogVisible = true;
      this.id = text.userId;
    },
    changeRole(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
.img {
  width: 50px;
  height: 50px;
}
</style>
